<template>
    <HeaderSearch></HeaderSearch>
    <headerMenu :is-search-product="true"></headerMenu>
<div class="i_bg">  
    <div class="content mar_20">
    	<img src="/images/img3.jpg" />        
    </div>
    
    <!--Begin 第三步：提交订单 Begin -->
    <div class="content mar_20">
    	
        <!--Begin 支付宝支付 Begin -->
    	<div class="warning">        	
            <table border="0" style="width:1000px; text-align:center;" cellspacing="0" cellpadding="0">
                <tbody>
              <tr height="35">
                <td style="font-size:18px;">
                	感谢您在本店购物！您的订单已提交成功，请记住您的订单号: <font color="#ff4e00">{{ serialNumber }}</font>
                </td>
              </tr>
              <tr>
                <td style="font-size:14px; font-family:'宋体'; padding:10px 0 20px 0; border-bottom:1px solid #b6b6b6;">
                	您选定的配送地址为: <font color="#ff4e00">{{ address }}</font>； &nbsp; &nbsp;您选定的支付方式为: <font color="#ff4e00">{{payName}}</font>； &nbsp; &nbsp;您的应付款金额为: <font color="#ff4e00">￥{{ cost }}</font>
                </td>
              </tr>
              <tr>
                <td style="padding:20px 0 30px 0; font-family:'宋体';">
                	支付宝网站(www.alipay.com) 是国内先进的网上支付平台。<br />
                    支付宝收款接口：在线即可开通，零预付，免年费，单笔阶梯费率，无流量限制。<br />
                </td>
              </tr>
              <tr>
                <td>
                	<div class="btn_u" style="margin:0 auto; padding:0 20px; width:120px;">
                    <a v-if="payName==='支付宝' " @click.prevent="payZFB()">立即使用支付宝支付</a>
                    <a v-if="payName==='微信' " @click.prevent="payWX()">立即使用微信支付</a>
                  </div>
                	<a @click.prevent="toIndex()">首页</a> &nbsp; &nbsp; <a @click.prevent="toOrder()">订单中心</a>
                </td>
              </tr>
              </tbody>
            </table>        	
        </div>
        <!--Begin 支付宝支付 Begin -->
        
            <!-- 弹窗 -->
        <div class="modal-overlay" v-if="showModal">
            <div class="modal">
                <div class="modal-header">
                    <h2 class="modal-title">微信支付</h2>
                    <button  class="close-button" @click="closeModal">&times;</button><!-- 关闭弹窗 -->
                </div>
                
                <div class="form-group">
                  <img :src="qrCodeDataUrl" alt="微信支付二维码" />
                  <p>请使用微信扫描二维码完成支付</p>
                </div>

   
                <div class="modal-actions">
                    <button class="cancel-btn" @click="toReturn()">完成</button>
                </div>
            </div>
        </div>
    </div>
	<!--End 第三步：提交订单 End-->  
</div>

</template>


<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import store from '@/store'
import HeaderSearch from '@/components/HeaderSearch.vue'
import HeaderMenu from '@/components/HeaderMenu.vue'
import QRCode from 'qrcode'

const router = useRouter()
const route = useRoute()

const serialNumber  = route.query.serialNumber;//订单号
const cost = route.query.cost;//金额
const address = route.query.address;//地址
const payName = route.query.payName;//支付方式

const qrCodeDataUrl = ref('')
const showModal = ref(false);// 显示/隐藏弹窗

//支付宝支付
const payZFB = async () => { 
  try{
        const response = await axios.get('api/payOrder', {
        params: {
            serialNumber: serialNumber
        },
        // responseType: 'text' // 如果需要在浏览器中直接跳转到支付页面，需要设置responseType
        })
        // 使用 Vue 的 ref 或响应式数据来处理返回的内容，而不是直接操作 DOM
        console.log(response.data);
        if(response.data.code==5500){
          alert(response.data.reason)

        }
        
        const paymentFormHtml = response.data;
        // 创建一个临时的 div 元素来解析 HTML 字符串
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = paymentFormHtml;
        
        // 获取表单元素
        const form = tempDiv.querySelector('form');
        if (form) {
            // 将表单添加到页面中
            document.body.appendChild(form);
            // 提交表单
            form.submit();
        } else {
            console.error('未找到支付表单');
        }
    }catch(error){
        console.error(error)
    }
}



//微信支付
const payWX = async () => {
  // router.push({name: 'wxPay', query: {serialNumber: serialNumber}})

  showModal.value = true;//打开弹窗 

  try {
    // 调用后端接口生成支付二维码
    const response = await axios.get('/api/wxzf',{
      params: {
            serialNumber: serialNumber
        },
    })
    if (response.data.code == 5200) {
      // 使用QRCode库生成二维码
      qrCodeDataUrl.value = await QRCode.toDataURL(response.data.pay_url)
    }
    console.log(response.data);
    
  } catch (error) {
    console.error('生成支付二维码失败:', error)
  }

}

// 关闭弹窗
const closeModal = () => {
    showModal.value = false;
};

//首页
const toIndex = () => {
  router.push({name: 'index'})
}
//订单中心
const toReturn = () => {
  router.push({
    name: 'return',
    query: {
      serialNumber:serialNumber
    }
  })
}

const toOrder = ()=>{
  router.push({
    name: 'allOrder',
  })
}


// 进入管理页面时隐藏HeaderView
onMounted(() => {

    store.commit('setShowPage', 1)
})

// 离开管理页面时恢复HeaderView
onUnmounted(() => {
    store.commit('setShowPage', 0)
})

</script>

<style scoped>
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.save-btn {
    background: #3498db;
    color: white;
}

.save-btn:hover {
    background: #2980b9;
}

.cancel-btn {
    background: #95a5a6;
    color: white;
}

.cancel-btn:hover {
    background: #7f8c8d;
}


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 1.3rem;
    color: #2c3e50;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #7f8c8d;
    cursor: pointer;
}

.form-group {
    /* margin-bottom: 20px; */
    
     display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
}
</style>